<template>
  <div class="update-profile-page m-auto shadow">
    <!-- tab切换 -->
    <ul class="nav nav-tabs nav-fill" id="myTab" role="tablist">
      <li class="nav-item">
        <a
          href="#"
          :class="generateActiveClass('profile')"
          @click.prevent="switchTab('profile')"
        >
          更新个人资料
        </a>
      </li>
      <li class="nav-item">
        <a
          href="#"
          :class="generateActiveClass('column')"
          @click.prevent="switchTab('column')"
        >
          更新专栏资料
        </a>
      </li>
    </ul>
    <!-- tab内容 -->
    <div class="tab-content pt-4 pb-4">
      <edit-tab
        :currentCategory="profileCategory"
        v-show="profileCategory.active"
      ></edit-tab>
      <edit-tab
        :currentCategory="columnCategory"
        v-show="columnCategory.active"
      ></edit-tab>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { commonUploadCheck } from "../helper";
import EditTab from "@/components/EditTab.vue";
type EditCategory = "profile" | "column";
// 约束props
interface CategoryType {
  type: EditCategory; // 传入当前的编辑类别 -> 控制submit是哪个form
  active: boolean; // 传入active状态 -> 控制表单的focus
}
export default defineComponent({
  name: "EditDetail",
  components: {
    EditTab
  },
  setup() {
    // 当前 tab的类型 profile说明是用户资料 column说明是专栏信息
    const profileCategory = ref<CategoryType>({
      type: "profile",
      active: true
    });
    const columnCategory = ref<CategoryType>({
      type: "column",
      active: false
    });
    // 设置当前的class样式
    const generateActiveClass = (klass: EditCategory) => {
      return {
        "nav-link": true,
        "active-tab":
          klass === "profile"
            ? profileCategory.value.active
            : columnCategory.value.active
      };
    };
    // 切换专栏信息的 点击事件
    const switchTab = (which: EditCategory) => {
      if (which === "column") {
        profileCategory.value.active = false;
        columnCategory.value.active = true;
      } else {
        profileCategory.value.active = true;
        columnCategory.value.active = false;
      }
    };
    return {
      generateActiveClass,
      switchTab,
      commonUploadCheck,
      profileCategory,
      columnCategory
    };
  }
});
</script>

<style lang="less" scoped>
.update-profile-page {
  width: 700px;
  .nav-link {
    color: @Text1;
    background: #fff;
    border: none;
    border-radius: 10px 10px 0 0;
    &.active-tab {
      background: @Bg_card;
      color: #111;
      font-size: 17px;
      font-weight: 600;
    }
  }
  border-radius: 15px;
  .tab-content {
    background: @Bg_blue1;
  }
}
</style>
